﻿<ion-header mode="ios">
    <ion-navbar mode="ios" transparent>
        <ion-title mode="ios">空气检测器</ion-title>
        <ion-buttons end (click)="gotoHelp()">
            <button ion-button icon-only>
                <i class="fal fa-question-circle"></i>
            </button>
        </ion-buttons>
        <ion-buttons end (click)="gotoSettings()">
            <button ion-button icon-only>
                <i class="fal fa-cog "></i>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content>
    <div class="data-box">
        <div class="historical-data">
            <div class="btn" (click)="gotoChart()">查看历史数据</div>
        </div>
        <div class="api-box">
            <div class="circle">
                <div class="aqi">
                    <div class="data">
                        {{device.data.AQICN}}
                        <span>AQI</span>
                    </div>
                    <div class="h-line"></div>
                    <div class="face">
                        <i class="{{ico}}"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="pm-box">
            <div class="v-line"></div>
            <div class="pm">
                <div class="data">{{device.data["pm1.0"]}}</div>
                <div>PM1.0</div>
            </div>
            <div class="v-line"></div>
            <div class="pm">
                <div class="data">{{device.data["pm2.5"]}}</div>
                <div>PM2.5</div>
            </div>
            <div class="v-line"></div>
            <div class="pm">
                <div class="data">{{device.data["pm10"]}}</div>
                <div>PM10</div>
            </div>
            <div class="v-line"></div>
        </div>
        <div class="others-box">
            <div class="other">
                <!-- <i class="fas fa-thermometer-half"></i> -->
                <img src="assets/img/icon/thermometer.png" />
                <div class="data">{{device.data.temp}}<span>℃</span></div>
                <div>温度</div>
            </div>
            <div class="other">
                <!-- <i class="fas fa-tint"></i> -->
                <img src="assets/img/icon/tint.png" />
                <div class="data">{{device.data.humi}}<span>%</span></div>
                <div>湿度</div>
            </div>
            <div class="other">
                <!-- <i class="fas fa-leaf"></i> -->
                <img src="assets/img/icon/leaf.png" />
                <div class="data">{{device.data.hcho}}<span>mg/m³</span></div>
                <div>甲醛</div>
            </div>
        </div>
        <div class="btn-list">
            <div class="btn">
                <img src="assets/img/icon/warning.png" />设置超标报警</div>
            <div class="btn">
                <img src="assets/img/icon/link.png" />关联其他设备</div>
        </div>
    </div>
</ion-content>